<template>
  <div>
    <form role="form" name="Form" class="col-md-4 col-md-offset-4 form-margin">
      <div class="form-group">
        <label v-show="state.method== 'mobile'">为了保护帐号安全，需要验证手机有效性</label>
        <label v-show="state.method== 'email'">为了保护帐号安全，需要验证邮箱有效性</label>
      </div>
      <div class="form-group">
        <p v-show="state.method== 'mobile'"> 点击发送短信按钮，将会发送一条有验证码的短信至手机:<span class="primary">{{account.mobile}}</span></p>
        <p v-show="state.method== 'email'"> 点击发送邮件按钮，将会发送一封有验证码的邮件至邮箱:<span class="primary">{{account.email}}</span></p>
      </div>
      <div class="form-group">
        <button class="btn btn-primary form-control" v-on:click.prevent="send">
          <span v-show="state.method== 'mobile'">发送短信</span>
          <span v-show="state.method== 'email'">发送邮箱</span>
        </button>
      </div> 
      <div class="form-group text-center">
        <a href="" v-on:click.prevent="choose">换用其他验证方式</a>
      </div> 
    </form>
  </div>
</template>
<script>
export default {
  props: {
    account: {
      required: true,
      type: Object
    },
    state: {
      required: true,
      type: Object
    }
  },
  methods: {
    send() {
      this.$dispatch('send')
      this.$dispatch('setStep', 3)
    },
    choose() {
      this.$dispatch('setMethod', 'choose')
    }
  }
}
</script>